/**
 * @param ele ，动画元素
 * @param target，元素动画要到达的目标位置 
 * @param cssProp，要做动画的具体样式名：小驼峰  cssProp = 'lineHeight'
 * @param fn，回调函数，等待当前动画结束后调用
 */
function animate(ele, target, cssProp, fn) {
    // ele是一个元素对象：可以增加属性
    // 清理可能存在的定时器：清理的时候从对象自己身上去取
    clearInterval(ele.timeId);

    // 定时器：存到对象中
    ele.timeId = setInterval(function () {
        // 拿到ele盒子原来的位置
        let current = getComputedStyle(ele)[cssProp];
        // console.log(current);

        // 变成数字
        current = parseFloat(current);
        // console.log(current);

        // 计算下一个位置：当前要走多远
        // （目标 - 当前位置） * 0.1
        let step = (target - current) * 0.1
        // console.log(step);

        // 让step变成整数：向上取整（当前是向右移动）
        if (step > 0) {
            // 往右走
            step = Math.ceil(step);
        }
        else {
            // 往左走
            step = Math.floor(step);
        }

        // 移动元素：修改元素的行内样式
        ele.style[cssProp] = current + step + 'px';

        console.log(step, current);

        // 结束定时器：current == 600 || step == 0
        if (step == 0) {
            clearInterval(ele.timeId);

            // 定时器结束的时候才代表前面的动画完成
            // 判定安全：fn必须要是函数
            if (typeof fn === 'function') {
                fn();
            }
        }
    }, 20);
}
